<template>
  <div class="rqa">
    <div class="rqbannerbox">
      <img src="../../assets/img/banner1.png" alt="" />
      <img src="../../assets/img/bannertext.png" alt="" />
    </div>
    <div class="rqmiddlebox">
      <div class="rqverticalbox">
        <div class="rqlineone">
          <p class="rqlineoneleft">
            <span>待我处理</span>
            <span>0</span>
          </p>
          <p>
            <i class="el-icon-document-checked"></i>
          </p>
        </div>
        <div class="rqlinetwo">
          <h4>基础信息</h4>
          <div class="rqlinebox">
            <div class="rqeachbox">
              <i class="el-icon-truck"></i>
              <span>车队信息</span>
            </div>
            <div class="rqeachbox">
              <i class="el-icon-s-finance"></i>
              <span>油卡信息</span>
            </div>
            <div class="rqeachbox" @click="routerfun('/home/VehicleInfo')">
              <i class="el-icon-s-order"></i>
              <span>车辆信息</span>
            </div>
            <div class="rqeachbox">
              <i class="el-icon-s-custom"></i>
              <span>驾驶员信息</span>
            </div>
            <div class="rqeachbox" @click="routerfun('/home/CarParts')">
              <i class="el-icon-s-ticket"></i>
              <span>车辆配件信息</span>
            </div>
          </div>
        </div>
        <div class="rqlinetwo">
          <h4>维保管理</h4>
          <div class="rqlinebox">
            <div class="rqeachbox" @click="routerfun('/home/Maintenance')">
              <i class="el-icon-takeaway-box"></i>
              <span>车辆维保申请</span>
            </div>
            <div class="rqeachbox" @click="routerfun('/home/PickupCar')">
              <i class="el-icon-folder-checked"></i>
              <span>维保取车登记</span>
            </div>
          </div>
        </div>
        <div class="rqlinetwo">
          <h4>报表</h4>
          <div class="rqlinebox">
            <div class="rqeachbox">
              <i class="el-icon-data-line"></i>
              <span>车辆报表</span>
            </div>
            <div class="rqeachbox">
              <i class="el-icon-coordinate"></i>
              <span>驾驶员报表</span>
            </div>
          </div>
        </div>
      </div>

      <div class="rqverticalbox">
        <div class="rqlineone">
          <p class="rqlineoneleft">
            <span>我创建的</span>
            <span>36</span>
          </p>
          <p>
            <i class="el-icon-edit-outline"></i>
          </p>
        </div>
        <div class="rqlinetwo">
          <h4>用车管理</h4>
          <div class="rqlinebox">
            <div class="rqeachbox" @click="routerfun('/home/applycar')">
              <i class="el-icon-suitcase"></i>
              <span>用车申请</span>
            </div>
            <div class="rqeachbox" @click="routerfun('/home/returncar')">
              <i class="el-icon-sell"></i>
              <span>还车登记</span>
            </div>
            <div class="rqeachbox" @click="routerfun('/home/vehiclefee')">
              <i class="el-icon-coin"></i>
              <span>车辆费用</span>
            </div>
          </div>
        </div>
        <div class="rqlinetwo">
          <h4>年检保险</h4>
          <div class="rqlinebox">
            <div class="rqeachbox" @click="routerfun('/home/zsja')">
              <i class="el-icon-reading"></i>
              <span>车辆车检登记</span>
            </div>
            <div class="rqeachbox" @click="routerfun('/home/zsjb')">
              <i class="el-icon-notebook-1"></i>
              <span>车辆保险登记</span>
            </div>
          </div>
        </div>
        <div class="rqlinetwo">
          <h4>报表统计</h4>
          <div class="rqlinebox">
            <div class="rqeachbox">
              <i class="el-icon-pie-chart"></i>
              <span>车辆出车统计</span>
            </div>
            <div class="rqeachbox">
              <i class="el-icon-medal-1"></i>
              <span>驾驶员出车统计</span>
            </div>
            <div class="rqeachbox">
              <i class="el-icon-postcard"></i>
              <span>部门出车统计</span>
            </div>
            <div class="rqeachbox">
              <i class="el-icon-document-delete"></i>
              <span>车辆违章统计</span>
            </div>
            <div class="rqeachbox">
              <i class="el-icon-paperclip"></i>
              <span>车辆事故统计</span>
            </div>
          </div>
        </div>
      </div>
      <div class="rqverticalbox">
        <div class="rqlineone">
          <p class="rqlineoneleft">
            <span>抄送我的</span>
            <span>2</span>
          </p>
          <p>
            <i class="el-icon-document-copy"></i>
          </p>
        </div>
        <div class="rqlinetwo">
          <h4>加油管理</h4>
          <div class="rqlinebox">
            <div class="rqeachbox">
              <i class="el-icon-folder-add"></i>
              <span>油卡充值</span>
            </div>
            <div class="rqeachbox">
              <i class="el-icon-edit-outline"></i>
              <span>汽车加油登记</span>
            </div>
          </div>
        </div>
        <div class="rqlinetwo">
          <h4>违章事故</h4>
          <div class="rqlinebox">
            <div class="rqeachbox" @click="routerfun('/home/lyja')">
              <i class="el-icon-date"></i>
              <span>车辆事故登记</span>
            </div>
            <div class="rqeachbox" @click="routerfun('/home/lyjb')">
              <i class="el-icon-notebook-2"></i>
              <span>车辆违章登记</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    routerfun(url) {
      this.$router.push(url);
    },
  },
};
</script>

<style lang="scss" scoped>
.rqa {
  width: 100%;
  min-width: 1000px;
  height: 100%;
  // background-color: pink;
  display: flex;
  flex-direction: column;
  overflow: auto;
  .rqbannerbox {
    height: 200px;
    width: 100%;
    min-width: 356px;
    overflow: hidden;
    border-radius: 10px;
    background: linear-gradient(to right, #4990e2, white);
    display: flex;
    img:nth-child(1) {
      height: 100%;
    }
    img:nth-child(2) {
      height: 200%;
      margin-top: -100px;
    }
  }
  .rqmiddlebox {
    flex: 1;
    width: 100%;
    // background-color: darkgreen;
    overflow: auto;
    display: flex;
    .rqverticalbox {
      width: 33.33%;
      min-height: 100px;
      // background-color: aqua;
      // margin: 5px;
      div {
        width: 96%;
        min-height: 25px;
        background-color: white;
        border-radius: 10px;
        margin: 8px;
        padding: 10px 20px;
      }
      .rqlineone {
        padding: 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .rqlineoneleft {
          display: flex;
          flex-direction: column;
          align-items: center;
          span:nth-child(2) {
            font-size: 20px;
          }
        }
      }
      .rqlinetwo {
        padding: 0;
        h4 {
          padding: 10px 20px;
          border-bottom: 1px solid rgb(222, 219, 219);
        }
        .rqlinebox {
          width: 100%;
          margin: 0;
          padding: 11.5px;
          display: flex;
          flex-wrap: wrap;
          .rqeachbox {
            width: 25.2%;
            height: 50%;
            padding: 0;
            flex-shrink: 0;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
            .el-icon-truck,
            .el-icon-s-finance,
            .el-icon-s-order,
            .el-icon-s-custom,
            .el-icon-s-ticket,
            .el-icon-suitcase,
            .el-icon-sell,
            .el-icon-coin,
            .el-icon-takeaway-box,
            .el-icon-folder-checked,
            .el-icon-data-line,
            .el-icon-coordinate,
            .el-icon-reading,
            .el-icon-notebook-1,
            .el-icon-pie-chart,
            .el-icon-medal-1,
            .el-icon-postcard,
            .el-icon-document-delete,
            .el-icon-paperclip,
            .el-icon-folder-add,
            .el-icon-edit-outline,
            .el-icon-date,
            .el-icon-notebook-2 {
              font-size: 18px;
              color: white;
              padding: 5px;
              border-radius: 5px;
              background-color: orange;
            }
            .el-icon-s-finance,
            .el-icon-s-custom,
            .el-icon-sell,
            .el-icon-coordinate,
            .el-icon-pie-chart,
            .el-icon-date {
              background-color: rgb(64, 139, 190);
            }
            .el-icon-s-order,
            .el-icon-data-line {
              background-color: rgb(246, 142, 94);
            }
            .el-icon-s-ticket,
            .el-icon-takeaway-box,
            .el-icon-paperclip {
              background-color: rgb(222, 144, 157);
            }
            .el-icon-coin,
            .el-icon-medal-1,
            .el-icon-notebook-2 {
              background-color: rgb(236, 204, 105);
            }
            .el-icon-folder-checked,
            .el-icon-notebook-1,
            .el-icon-postcard,
            .el-icon-edit-outline {
              background-color: rgb(112, 161, 112);
            }
            span {
              font-size: 12px;
              margin-top: 10px;
              text-align: center;
            }
          }
        }
      }
    }
  }
}
:deep(.el-icon-document-checked),
:deep(.el-icon-document-copy),
:deep(.el-icon-edit-outline) {
  color: white;
  font-size: 22px;
  padding: 7px;
  border-radius: 5px;
}
:deep(.el-icon-document-checked) {
  background-color: rgb(79, 176, 150);
}
:deep(.el-icon-document-copy) {
  background-color: rgb(77, 130, 184);
}
:deep(.el-icon-edit-outline) {
  background-color: rgb(210, 131, 108);
}
</style>